import { useNavigate } from 'react-router-dom';
import { NavBar } from 'react-vant'
import { DeleteO } from '@react-vant/icons';
import '../../sass/MyCollected.scss'

function MyCollected() {

    let navigate = useNavigate()

    return (
        <div className="my-collected">
            <NavBar
                title="我的收藏"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <div className="top-img"></div>
            <div className="content-wrap">
                <div className="content-list">
                    <div className="img"></div>
                    <div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
                    <div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    <div className="price-wrap">
                        <div className="price">¥28.00</div>
                        <div className="icon"><DeleteO  /></div>
                    </div>
                </div>
                <div className="content-list">
                    <div className="img"></div>
                    <div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
                    <div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    <div className="price-wrap">
                        <div className="price">¥28.00</div>
                        <div className="icon"><DeleteO  /></div>
                    </div>
                </div>
                <div className="content-list">
                    <div className="img"></div>
                    <div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
                    <div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    <div className="price-wrap">
                        <div className="price">¥28.00</div>
                        <div className="icon"><DeleteO  /></div>
                    </div>
                </div>
                <div className="content-list">
                    <div className="img"></div>
                    <div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
                    <div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    <div className="price-wrap">
                        <div className="price">¥28.00</div>
                        <div className="icon"><DeleteO  /></div>
                    </div>
                </div>
                <div className="content-list">
                    <div className="img"></div>
                    <div className="name ellipse-text">黑糖拿铁黑糖拿铁黑糖拿铁黑糖拿铁</div>
                    <div className="desc ellipse-text">滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答滴滴答滴答</div>
                    <div className="price-wrap">
                        <div className="price">¥28.00</div>
                        <div className="icon"><DeleteO  /></div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default MyCollected;